<template>
  <div class="echart-box" :style="{width: '100%', height: '100%'}">
    <div id="ScatterHeatMap" :style="{width: '100%', height: '98%'}"></div>
  </div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    props: {
      scatterDataMore: {
        type: Array
      },
      heatmapData: {
        type: Array
      },
      yAxis: {
        type: Array,
        required: true
      },
      xAxis: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        myChart: null,
        sampleName: false,
      }
    },
    watch: {
      heatmapData: {
        handler(n, o) {
          this.map2()
        },
        deep: true
      }
    },
    mounted() {
      setTimeout(() => {
        this.map2()
      })
      window.addEventListener('resize', this.resizeChart)
    },
    activated() {
      if(this.myChart){
        this.resizeChart()
      }
    },
    methods: {
      resizeChart() {
        this.myChart.resize()
      },
      map2() {
        const values = []
        //取最小值
        this.scatterDataMore.forEach(item => {
          values.push(item[2])
        })
        const min = Math.min(...values)
        const _that = this
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById('ScatterHeatMap'))
        // 绘制图表
        const { scatterDataMore,heatmapData,yAxis,xAxis,sampleName } = this
        console.log({xAxis})
        this.myChart.setOption({
          title:{
            text:sampleName?`分析数据集-${sampleName}`:'',
            subtext :(xAxis && xAxis.length)?`分析字段: ${xAxis.join(",")}\n`:''
          },
          backgroundColor: '#fff',
          animation: true,
          toolbox:{
            feature:{
              saveAsImage:{
                type:'png',
                name:'变量关联-热力图'
              }
            }
          },
          // title: {
          //   show: true,
          //   text: '',
          //   left: 'center',
          //   top: '5%'
          // },
          grid: { // 容器本身设置
            width: '60%',
            height: '80%',
            top: '10%',
            left: '15%'
          },
          xAxis: [{
            type: 'category',
            data: this.xAxis,
            axisTick: {
              show: false
            },
            splitArea: {
              show: true
            },
            axisLine: {
              show: true
            },
          },
            {
              type: 'category',
              show: false,
              data: xAxis,
              inverse: true, // 是否是反向坐标轴
              // axisLabel: { // 坐标轴刻度标签的相关设置
              //   rotate: -50
              // }
            }
          ],
          yAxis: {
            type: 'category',
            data: yAxis,
            axisTick: {
              show: false
            },
            splitArea: {
              show: true
            }
          },
          visualMap: {
            type: 'continuous',
            left: '80%',
            top: '20%',
            min: min,
            max: 1,
            seriesIndex: 0,
            precision: 5,
            calculable: true,
            realtime: false,
            inRange: {
              color: ['#f2faff', '#99d6ff', '#80ccff', '#4db8ff',
                '#40b3ff', '#33adff', '#26a8ff', '#19a3ff',
                '#0d9eff', '#0099ff', '#0099ff', '#0091f2',
                '#008ae6', '#1994e6', '#2093df', '#2691d9',
                '#2d90d2', '#338fcc', '#398ec6', '#408cbf',
                '#468bb9', '#4d8ab3', '#5388ac', '#0082d9',
                '#007acc',
                '#5c85d6', '#4775d1', '#006bb3', '#0063a6',
                '#0073bf', '#005c99', '#3366cc', '#2e5cb8'
              ]
            }
          },
          series: [{//色块
            name: 'heatmap1',
            type: 'heatmap',
            data: scatterDataMore,
            label: false,
            itemStyle: {
              normal: {
                show: true,
                borderColor: '#ABABAB'

              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: 'rgba(255, 255, 255, 0.5)'
              }
            },
            zlevel: 2
          },
            {//数字
              name: 'heatmap2',
              type: 'heatmap',
              data: heatmapData,
              label: {
                normal: {
                  color: '#ABABAB',
                  fontSize: 20,
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  show: true,
                  color: '#FFFFFF',
                  borderColor: '#ABABAB'

                },
                emphasis: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(255, 255, 255, 0.5)'
                }
              },
              zlevel: 1
            }
          ]
        })
      },
    },
    destroyed() {
      window.removeEventListener('resize', this.resizeChart)
    },
    created() {
      console.log(this.heatmapData)
    }
  }
</script>
